﻿<style type="text/css">
/* Slaider */
#slideshow { position: relative; padding: 0; list-style: none; width: 620px; height: 280px; overflow: hidden; }
#slideshow img { border: none; }
#slideshow .arrow { width: 42px; height: 50px; display: block; position: absolute; top: 116px; text-indent: -9999px; overflow: hidden; cursor: pointer; }
#slideshow .arrowL { background: url(/images/arrowsslide.png) no-repeat; left: 0; }
#slideshow .arrowR { background: url(/images/arrowsslide.png) -42px 0px no-repeat; right: 0; }
.slideView, .thumbList { margin: 0; padding: 0; list-style: none; }
.slideView { height: auto; position: relative; top: 0; left: 0; overflow: hidden; z-index: 0; }
.slideView li { width: 100%; height: 280px; float: left; margin: 0; display: inline; }
.slideView li a { display: block; width: 100%; height: 100%; }
#slideshow .desc { padding: 5px; margin: 0; width: 620px; height: 24px; background: black; position: absolute; bottom: 0; left: 0px; color: white; font-weight: bolder; overflow: hidden; z-index: 6; font-size: 12px; }
#slideshow .wrap { background: black; position: absolute; height: 75px; bottom: 0; left: 0px; z-index: 90;}
#slideshow .thumbList { overflow: hidden; position: absolute; top: 0px; left: 0px; margin-top: 12px; display:none; }
#slideshow .thumbList li { width: 107px; height: 52px; display: inline; margin: 0; float: left; display:none; }
#slideshow .thumbList li a { display: block; width: 80px; height: 48px; border: 2px solid black; margin-left: 11px; }
#slideshow .thumbList li a:hover { border-color: #f75514; }
/* ------- */
</style>
<div class="rt-grid-8 rt-alpha">
  <div class="flush">
    <div class="rt-block">
      <div class="module-content">
        <div class="module-content2">
          <div id="slideshow">
            <ul class="slideView">
              <li><a href="#"><img src="/DEMO/rs1.jpg" alt="the description of image 1" /></a></li>
              <li><a href="#"><img src="/DEMO/rs2.jpg" alt="the description of image 2" /></a></li>
              <li><a href="#"><img src="/DEMO/rs3.jpg" alt="the description of image 3" /></a></li>
            </ul>
          </div>
          <script src="/js/slideView.js" type="text/javascript"></script> 
          <script type="text/javascript">
$(function() {
$("#slideshow").slideView({
 loop: true
 }); 
});
</script> 
        </div>
      </div>
    </div>
  </div>
</div>
<div class="rt-grid-4 rt-omega">
  <div class="flush">
    <div class="rt-block">
      <div class="module-content">
        <div class="module-content2">
          <div class="roknewspager-wrapper">
            <ul class="roknewspager">
              <li>
                <div class="roknewspager-div"> <a href="#"> <img src="/DEMO/thumb_rs3.jpg" alt="Dominion Template Release Jan10" /> </a>
                  <div class="introtext"> <strong>Dominion</strong>, the January 2010 template release from RocketTheme. </div>
                </div>
              </li>
              <li>
                <div class="roknewspager-div"> <a href="#"> <img src="/DEMO/thumb_rs1.jpg" alt="6 Preset Styles - 18 Combinations" /> </a>
                  <div class="introtext"> 6 stunning preset styles, in a mix of light and dark, each with 3 visual intensity levels. </div>
                </div>
              </li>
              <li>
                <div class="roknewspager-div"> <a href="#"> <img src="/DEMO/thumb_rs2.jpg" alt="RTL Support" /> </a>
                  <div class="introtext"> RTL support from module structure, to the Fusion menu to the template elements. </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>